<template>
  <q-dialog v-model="dialogVisible" title="工具资源配置" :full-width="showEdit">
    <div class="bg-white q-pa-lg">
      <div class="text-h6">工具关联资源编辑</div>
      <div class="row">
        <div class="q-ma-md" style="max-height: 540px;width:480px;overflow: auto">
          <q-card class="q-mb-md" v-for="resource in resources" :key="resource.url" bordered>
            <q-card-section horizontal @click="editResource(resource)">
              <q-card-section class="q-pt-xs">
                <a :href="resource.url" target="_blank" class="q-link">
                  <div class="text-overline">
                    <q-chip dense size="sm">{{ resource.origin }}</q-chip>
                  </div>
                  <div v-if="resource.title" class="text-h6 q-mt-sm q-mb-xs text-black">{{
                      resource.title
                    }}
                  </div>
                  <div v-if="resource.summary"
                       class="text-caption text-grey" v-html="resource.summary"></div>
                </a>
              </q-card-section>
              <q-card-section class="col-5 flex flex-center">
                <q-img
                    class="rounded-borders"
                    :src="resource.image"
                />
              </q-card-section>
            </q-card-section>
          </q-card>
          <div class="q-my-md">
            <q-btn class="full-width" color="green" @click="newResource">新增资源</q-btn>
          </div>
        </div>
        <q-card v-if="showEdit" class="col q-ma-md q-pa-md" style="width: 800px">
          <q-card-section class="q-pt-none">
            <strong>资源类型</strong>
            <div>
              <q-radio v-model="formData.type" val="图文" label="图文" color="teal"/>
              <q-radio v-model="formData.type" val="视频" label="视频" color="orange"/>
              <q-radio v-model="formData.type" val="音频" label="音频" color="red"/>
            </div>
            <strong>资源信息</strong>
            <q-input class="q-mb-sm" v-model="formData.title" filled label="标题"/>
            <q-input class="q-mb-sm" v-model="formData.url" filled label="链接"/>
            <q-input class="q-mb-sm" v-model="formData.origin" filled label="资源平台"/>
            <strong>资源摘要</strong>
            <q-editor v-model="formData.summary" min-height="5rem"/>
          </q-card-section>
          <q-card-actions align="right">
            <q-btn @click="showEdit=false">取 消</q-btn>
            <q-btn type="primary" @click="deleteResource()" :loading="isLoading">删 除</q-btn>
            <q-btn v-if="isFormAdd" type="primary" @click="addResource()" :loading="isLoading">新 增</q-btn>
            <q-btn v-if="!isFormAdd" type="primary" @click="saveResource()" :loading="isLoading">保 存</q-btn>
          </q-card-actions>
        </q-card>
      </div>
    </div>

  </q-dialog>
</template>

<script>

import iToolEdit from 'src/api/toolEdit'

export default {
  name: 'ToolResourceEditDialog',
  props: {
    value: Boolean,
    data: Object
  },
  data () {
    return {
      dialogVisible: false,
      showEdit: false,
      isFormAdd: false,
      formData: this.getResourceTemplate(),
      isLoading: false,
      resources: [{
        origin: '少数派', // 外部资源平台
        url: 'https://sspai.com/post/67331', // 关联资源链接
        title: 'macOS 如何限制 CPU 占用', // 标题
        summary: '我们知道，其实苹果的 macOS 是一个半开半闭源的操作系统，大致来讲，GUI 部分是闭...',
        image: 'https://cdn.sspai.com/2021/06/20/36c5dd2634f620f5ade1749dfef1682c.jpg?imageMogr2/auto-orient/quality/95/thumbnail/!1420x708r/gravity/Center/crop/1420x708/interlace/1',
        type: '图文', // 资源内容类型 eg. '图文' | '视频' | '音频' | ...
        embedType: '' // 资源嵌入类型 eg. '跳转' | '嵌入' | '卡片' | ...
      }]
    }
  },
  watch: {
    dialogVisible (value) {
      this.$emit('input', value)
    },
    value () {
      this.dialogVisible = this.value
    }
  },
  mounted () {
    this.dialogVisible = this.value
  },
  methods: {
    getResourceTemplate () {
      return {
        origin: '',
        url: '',
        title: '',
        summary: '',
        type: '', // 资源内容类型 eg. '图文' | '视频' | '音频' | ...
        embedType: '' // 资源嵌入类型 eg. '跳转' | '嵌入' | '卡片' | ...
      }
    },
    async submit (mode) {
      this.isLoading = true
      try {
        const tool = {
          ...this.data,
          resources: this.resources
        }
        tool.icon = this.imageUrl || tool.icon
        tool.tags = tool.tags.map(e => e._id)
        let record
        if (this.formData._id) {
          record = await iToolEdit.createWorkflow.post(tool, {
            pathParams: {
              operation: 'edit'
            }
          })
        } else {
          record = await iToolEdit.createWorkflow.post(tool, {
            pathParams: {
              operation: 'create'
            }
          })
        }
        if (mode === 'commit') {
          await iToolEdit.updateWorkflowStatus.put({
            operation: 'commit'
          }, {
            pathParams: {
              id: record.versionId
            }
          })
        }
      } finally {
        this.isLoading = false
      }
    },
    async editResource (data) {
      this.showEdit = true
      this.isFormAdd = false
      this.formData = data
    },
    async deleteResource () {
      // ...
    },
    async newResource () {
      this.showEdit = true
      this.isFormAdd = true
      this.formData = this.getResourceTemplate()
    },
    async saveResource () {
      this.showEdit = false
      await this.submit()
    },
    async addResource () {
      this.showEdit = false
      this.resources = [
        this.formData,
        ...this.resources
      ]
      await this.submit()
    }
  }
}
</script>

<style scoped>

</style>
